<template>
	<view class="container">
		<!-- 当前福润隆主页用的是这个，不是另外两个 -->
		<u-navbar title-color="#fff" back-icon-color="#ffffff"
			:is-fixed="isFixed" :is-back="isBack" 
			:background="background" 
			:back-text-style="{color: '#fff'}" :title="titleNav" 
			:back-icon-name="backIconName" :back-text="backText"
		>
			<view class="map-wrap" >
				<u-icon name="map" color="#ffffff" size="24"></u-icon>
				<text class="map-wrap-text">{{location}}</text>
			</view>
		</u-navbar>
		<u-swiper :height="330" :list="list" :title="title" :effect3d="effect3d"
		:indicator-pos="indicatorPos" :mode="mode" :interval="2500" ></u-swiper>
		
		<swiperLiandong></swiperLiandong>
		
		<bottomCart @bottomUp="bottomUp"></bottomCart>
		<!-- 底部弹窗部分 -->
		<u-popup border-radius="18" v-model="show"
		mode="bottom" length="50%" :mask="true"
		:closeable="true"
		close-icon-pos="top-right"
		>
			<view class="cart-header" @tap="empty">清空购物车</view>
			<scroll-view class="u-drawer__scroll-view" scroll-y="true" >
				<view class="pass-slot" v-for="(item,index) in this.cart" >
					<view class="item">
						<view class="left-picture">
							<image :src="item.sptpcflj"></image>
						</view>
						<view class="right-info">
							<view class="name">{{item.spmc}}</view>
							<view class="price-number">
								<view class="price">￥{{item.spdj}}</view>
								<view class="number">
									<view @tap="subtract(item)">-</view>
									<view>{{item.sale_number}}</view>
									<view @tap="add(item)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tianchong"></view>
			</scroll-view>
		</u-popup>
		
		<!-- <view>	FuRunLong</view> -->
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	import swiperLiandong from '@/components/swiperLiandong.vue'
	import bottomCart from '@/components/bottomCart.vue'
	import topSwiper from '@/components/topSwiper.vue'
	var amapFile = require('../../AMapWX_SDK/amap-wx.js');//如：..­/..­/libs/amap-wx.js
	import {request} from '../../api/ajax.js'
	export default{
		components:{
			swiperLiandong,
			bottomCart,
			topSwiper
		},
		data(){
			return{
				//往顶部导航栏插件传的值
				isFixed: true,
				isBack: false,
				background: {
					// 'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
					'background': '#02a774'
				},
				titleNav: '福润隆超市',
				backIconName: 'nav-back',
				backText: '返回',
				
				show:false,//弹窗
				
				//u-swiper的数据
				list: [],
				title: false,
				mode: 'round',
				indicatorPos: 'bottomCenter',
				effect3d: false,
				
				location:''   //顶部定位
			}
		},
		computed: {
		  ...mapState(['userInformation','goodsInfor','goodsArray','num_flag','cart']),
		  ...mapGetters(['count','show_num','totalPrice','show_menu'])
		},
		async onShow() {
			this.getLocation();
			
			this.getSwiperImage();
		},
		
		methods:{
			getLocation(){
				uni.getLocation({
				    type: 'wgs84',
					geocode:true,
				    success: (res) => {
						console.log('chenggong',res.address)
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						// this.location = res.address.province+' '+res.address.city+' '+res.address.district+' '+res.address.district
						this.location = res.address.city+' '+res.address.district+' '+res.address.street
				    }
				});
			},
			
			async getSwiperImage(){
				let result = await this.$request({
					url:'/supermarket/sys/getlbt'
				})
				
				this.list = result.map((item) => {
					let obj ={};
					obj.image = item;
					return obj;
				})
				// console.log('福润隆',this.list)
			},
			
			//用微信小程序sdk获取POI
			getPOI(){
				var that = this;
				var myAmapFun = new amapFile.AMapWX({key:'ec69b5321eb6cd25cbe4a53912dcd7e9'});
				myAmapFun.getPoiAround({
				  success: function(data){
					//成功回调
					console.log('成功回调',data)
				  },
				  fail: function(info){
					//失败回调
					console.log(info)
				  }
				})
			},
			
			//清空购物车
			empty(){
				this.$store.commit('empty_cart')
			},
			
			//让底部弹窗出现
			bottomUp(){
				this.show = true
			},
			
			//点加号，往购车里加东西
			add(shop_info){
				this.$store.commit("add_cart",shop_info);
			},
			
			//点减号，往购物车里减东西
			subtract(shop_info){
				this.$store.commit("subtract_cart",shop_info);
			},
			
		}
	}
</script>

<style lang="scss">
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		background-color: rgba(240,240, 240, 0.35);
		color: #fff;
		font-size: 22rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}

	.map-wrap-text {
		padding: 0 6rpx;
	}
	
	.location{
		padding: 20rpx 10rpx;
		// text-align: center;
	}
	.u-drawer__scroll-view {
		width: 100%;
		height: 100%;
		// border: 1rpx solid #007AFF;
	}
	.cart-header{
		// border: 1rpx solid #f00;
		line-height: 50rpx;
		font-weight: bold;
		display: inline-block;
	}
	.pass-slot{
		display: flex;
		flex-direction: column;
		.item{
			display: flex;
			flex-direction: row;
			// border: 1rpx solid #f00;
			border: 1rpx solid #eee;
			padding: 15rpx 0;
			.left-picture{
				// border: 1rpx solid #02A774;
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.right-info{
				// border: 1rpx solid #02A774;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.name{
					font-weight: bold;
				}
				.price-number{
					line-height: 50rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.price{
						color: #fa436a;
					}
					.number{
						display: flex;
						:nth-child(odd){
							font-size: 50rpx;
						}
						:nth-child(2){
							margin: 0 20rpx;
						}
					}
				}
			}
		}
	}
	.tianchong{
		height: 240rpx;
		// border: 1rpx solid #f00;
	}
</style>
